import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector, connect } from 'react-redux';
import { RootDispatch, RootState } from '@/store';
import { readOnlyOption } from '@/views/ExcelDemo/models/printReport.model';
import styles from './index.module.less';

const { luckysheet } = window;

class Context extends React.Component<any> {
  componentDidMount(): void {
    console.log('this.props.lucksheetOptions', this.props);
    document.title = '预览页面';
    luckysheet.create({
      container: 'luckysheet', // luckysheet为容器id
      title: 'Demo', // 设定表格名称
      lang: 'zh', // 设定表格语言
      ...readOnlyOption,
    });
  }

  render() {
    return (
      <div className={styles.excelWrap}>
        {/* <div ref={drop} className={styles.context}></div> */}
        <div
          id="luckysheet"
          className={styles.luckySheet}
          style={{
            height: '100vh',
          }}
        ></div>
      </div>
    );
  }
}

export default connect(
  ({ printReport }) => ({
    ...printReport,
  }),
  ({ printReport }) => ({
    ...printReport,
  }),
)(Context);
